/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-07 14:36:09
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-09-20 10:21:39
 */
import React, { useRef, useState, useEffect } from "react";
import { Pie } from '@ant-design/plots';
import {
	DatePicker,
	Input,
	InputNumber,
	Menu,
	Modal,
	Button,
	Tooltip,
	Dropdown,
	Descriptions,
	Select,
	Space,
	Table,
	message,
	Tabs,
	Popconfirm,
	Checkbox,
	Card,
	Form,
	Collapse,
	Empty
} from "antd";
import { UserOutlined, DownOutlined, DeleteOutlined, SwapRightOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import _ from "lodash";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";
import moment from "moment";
import { formatterCurrency, toLocaleString, formatSize } from "@utils/format";
import copy from "copy-to-clipboard";
import { NavLink, Outlet, useParams } from "react-router-dom";
import { ThTable } from "@/components/ThTable";
import { isMobile } from "@utils";
import SearchBar from "@/components/SearchBar";
import MList from "@/components/mobile/MList";
import Footer from "@/components/Footer";
import common from "@utils/common";
import api from "@services/";
import DCard from "@/components/DCard";

const columns = [
	{
		title: "Rank",
		dataIndex: "rank_number",
		key: "rank_number",
		width: "5%",
		showType: "rank"
	},
	{
		title: "Earning Accounts",
		dataIndex: "earnings_acc",
		key: "earnings_acc",
		width: "20%",
		textWrap: "word-break",
		showType: "copy-link",
		link: '/account/{earnings_acc}'
	},
	{
		title: "Signature Accounts",
		dataIndex: "signature_acc_num",
		key: "signature_acc_num",
		width: "10%",
		textWrap: "word-break",
		showType: "link",
		tpl: "/account/signaturer/{earnings_acc}"
	},
	{
		title: "Total Staking",
		dataIndex: "total_staking",
		key: "total_staking",
		width: "15%",
		textWrap: "word-break",
		showType: "balance-logo"
	},
	{
		title: "Power",
		dataIndex: "total_power",
		key: "total_power",
		width: "11%",
		textWrap: "word-break",
		ellipsis: true,
		showType: "power"
	},
	{
		title: "Power Ratio",
		dataIndex: "power_ratio",
		key: "power_ratio",
		width: "10%",
		textWrap: "word-break",
		render: (txt, record) => {
			if (!txt) {
				return '0%';
			}
			return parseFloat((parseFloat(txt) * 100).toFixed(3)) + '%'
		}
	},
	{
		title: "Total Reward",
		dataIndex: "total_reward",
		key: "total_reward",
		width: "10%",
		showType: "balance-logo"
	}
];

const Main = ({ className }) => {
	const navigator = useNavigate();
	const [totle, setTotle] = useState(0);
	const [price, setPrice] = useState(0);
	const [miners, setMiners] = useState(0);
	const [files, setFiles] = useState(0);
	const [space, setSpace] = useState();
	const [config, setConfig] = useState();
	const [gatewayTotal, setGatewayTotal] = useState(0);
	document.title = "Transfers-CESS Scan";
	const getPrice = async () => {
		let space1 = await api.total.storage();
		// console.log(space);

		if (space1.msg == 'ok') {
			let d = {
				total: space1.data.verified,
				verified: space1.data.unsold,
				used: space1.data.sold,
			};
			if (!d.total) {
				d = {
					total: 0,
					used: 0,
					verified: 0
				};
			}
			d.available = d.verified;
			d.totalObj = formatSize(d.total);
			d.availableObj = formatSize(d.available);
			d.usedObj = formatSize(d.used);
			setSpace(d);
			let availableGB = parseFloat((parseInt(d.available) / 1073741824).toFixed(3));
			let usedGB = parseFloat((parseInt(d.used) / 1073741824).toFixed(3));
			let unit = '(GB)';
			if (availableGB > 1024) {
				availableGB = parseFloat((availableGB / 1024).toFixed(3));
				usedGB = parseFloat((usedGB / 1024).toFixed(3));
				unit = '(TB)';
			}
			const configs = {
				appendPadding: 0,
				padding: 20,
				width: 250,
				height: 250,
				data: [
					{
						type: 'Spare Storage' + unit,
						value: availableGB,
					},
					{
						type: 'Sold Storage' + unit,
						value: usedGB
					}
				],
				angleField: 'value',
				colorField: 'type',
				radius: 1,
				innerRadius: 0.85,
				color: ['#adc5fa', '#3c68ce'],
				label: false,
				legend: false,
				statistic: {
					title: false,
					content: {
						content: '',
					},
				},
			};
			setConfig(configs);
		}
		let price = await api.storage.price();
		setPrice(price);
		let sminer = await api.total.sminer();
		setMiners(sminer.data);
		let f = await api.total.file();
		if (f.msg == 'ok') {
			setFiles(f.data);
		}
	}
	const getGatewayTotal = async () => {
		let res = await api.storage.gateway({ pageindex: 1, pagesize: 1000 });
		if (res.msg == 'ok') {
			setGatewayTotal(res.total);
		}
	}
	useEffect(() => {
		getPrice();
		getGatewayTotal();
	}, []);
	useEffect(() => {
		common.showAPIUrl();
	}, []);

	const props = {
		border: true,
		size: "middle",
		pagesize: 10,
		cacheKey:"storage-list",
		loadList: {
			method: api.sminer.top100Revenues,
			cb: {
				total: setTotle
			}
		},
		table: {
			columns
		}
	};

	return (
		<div className={className}>
			<div className="containner-in">
				<SearchBar background={"#f4f4f4"} hasBackground={true} height="100px" />
				<div className="content" style={{ marginTop: "20px" }}>
					<div className="overview">
						<div className="left">
							<div className="box1">
								<DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/overview.png"} />} title="Overview">
									<div className="box-con">
										<div className="box">
											<img className="img" src={process.env.PUBLIC_URL + "/img/storage-power.png"} />
											<div>
												<span>Storage Miners</span>
												<label>{miners}</label>
											</div>
										</div>
										<div className="box">
											<img className="img" src={process.env.PUBLIC_URL + "/img/files.png"} />
											<div>
												<span>Files</span>
												<label>{files}</label>
											</div>
										</div>
										<div className="box">
											<img className="img" src={process.env.PUBLIC_URL + "/img/gateway.png"} />
											<div>
												<span>Public Gateway</span>
												<label className="gateway-link" onClick={() => navigator('/storage/gateway')}>{gatewayTotal}</label>
											</div>
										</div>
									</div>
								</DCard>
							</div>
							<div className="box2">
								<DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/cost.png"} />} title="Storage Cost" extra={<span className="extra-box" onClick={() => navigator('/storage/price')}><span>Calculator</span><img width={20} height={20} src={process.env.PUBLIC_URL + "/img/calculator.png"} /></span>}>
									<div className="info">Estimated {price} CESS / GB / Month</div>
								</DCard>
							</div>
						</div>
						<div className="right">
							{space &&
								<DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/space.png"} />} title="Storage Info">
									<div className="box">
										<div className="bleft">
											{config && <Pie {...config} />}
											<img className="zx" width={86} height={99} src="/img/u246.png" />
										</div>
										<div className="bright">
											<div className="t1">{toLocaleString(space.totalObj.n)} {space.totalObj.unit}</div>
											<div className="t2">Total</div>
											<div className="t3">
												<div className="t3-1"></div>
												<span>
													<label>{toLocaleString(space.availableObj.n)} {space.availableObj.unit}</label>
													<font>Spare Storage</font>
												</span>
											</div>
											<div className="t3">
												<div className="t3-2"></div>
												<span>
													<label>{toLocaleString(space.usedObj.n)} {space.usedObj.unit}</label>
													<font>Sold Storage</font>
												</span>
											</div>
										</div>
									</div>
								</DCard>}
						</div>
					</div>
					<div className="list">
						<div>
							<div className="o-title">
								<img src={process.env.PUBLIC_URL + "/img/u77.png"} />
								Top 100 Miners
							</div>
							<div className="pc-list">
								<ThTable props={props} />
							</div>
							<div className="mobile-list">
								<MList props={props} />
							</div>
						</div>
					</div>
				</div>
				<Footer />
			</div>
		</div>
	);
};
export default styled(Main)`
	display: block;
	overflow: hidden;
	.overview{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		margin-bottom: 20px;
		.left{
			width:65%;
			.box1{
				.box-con {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					padding:10px;
					.gateway-link{
						color:#0057FF!important;
						cursor: pointer;
					}
					.box {
						width: 33.333%;
						height: 80px;
						display: flex;
						flex-direction: row;
						align-items: center;
						img {
							width: 34px;
							height: 34px;
							margin: 0 20px;
						}
						div {
							display: flex;
							flex-direction: column;
							span {
								font-size: 14px;
								color: #6b7486;
								line-height: 20px;
							}
							label {
								font-size: 20px;
								color: #282e39;
								line-height: 18px;
								font-weight: lighter;
							}
						}
					}
				}				
			}
			.box2{
				display: block;
				overflow: hidden;
				margin-top:10px;
				.extra-box{
					width:100px;
					height:30px;
					line-height: 30px;
					display: flex;
					overflow: hidden;
					align-items: center;
					justify-content: space-between;
					background-color: #000;
					border-radius: 6px;
					padding: 0 10px;
					cursor: pointer;
					float: right;
					span{
						color:#fff;
						font-weight: lighter;
					}
					img{
						width:16px;
					}
				}
				.extra-box:hover{
					background-color: #353535;
				}
				.info{
					line-height: 38px;
					height: 38px;
					color: #090909;
					font-size: 18px;
					padding:30px 20px;
				}
			}
		}
		.right{
			width:calc(35% - 10px);
			.box{
				position: relative;
				top:0;
				width: 100%;
				overflow: hidden;
				.bleft{
					width:240px;
					height:269px;
					position: relative;
					top:0;
					left:10px;
					.zx{
						position: absolute;
						top: 86px;
						left: 79px;
						z-index: 0;
					}
				}
				.bright{
					position: absolute;
					top: 46px;
					right: 0px;
					display: flex;
					flex-direction: column;
					width: 45%;
					.t1{
						font-size: 28px;
					}
					.t2{
						font-size: 14px;
						margin-bottom:20px;
						color: rgb(107, 116, 134);
					}
					.t3{
						display: flex;
						flex-direction: row;
						margin-top:10px;
						div{
							width:6px;
							height:28px;
							display: block;
							overflow: hidden;
							border-radius: 6px;
						}
						.t3-1{
							background-color: rgb(173, 197, 250);
						}
						.t3-2{
							background-color: rgb(60, 104, 206);
						}
						span{
							margin-left:20px;
							display: flex;
							flex-direction: column;
							label{
								font-size: 14px;
								color: rgb(0, 0, 0);
							}
							font{
								font-size: 13px;
								color: rgb(107, 116, 134);
							}
						}
					}
				}
			}
		}
	}
	@media screen and (min-width: 700px) and (max-width: 1300px) {
		.overview{
			flex-direction: column!important;
			.left,.right{
				width:100%!important;
			}
			.right{
				margin-top:20px;
			}
		}
	}
	@media screen and (max-width: 700px) {
		.overview{
			flex-direction: column!important;
			.left{
				flex-direction: column!important;
				width:100%!important;
				.box1,.box2{
					width:100%!important;
					.box{
						width:50%!important;						
					}
					.img{
						display: none!important;
					}
					label{
						color:#000!important;
						font-size: 24px!important;
						line-height: 30px!important;
					}
				}
			}
			.right{
				width:100%!important;
				margin-top:20px;
				.bright{
					width: 36%!important;
					.t1{
						font-size: 22px!important;
					}
				}
			}
		}
	}
`;
